<template>
  <div id="map"></div>
</template>
<script>
import Map from "ol/Map.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
// import TileLayer from "ol/layer/Tile.js";
// import TileWMS from "ol/source/TileWMS.js";

import { TileWMS, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import View from "ol/View.js";
import { get as getProjection } from "ol/proj.js";
import { getWidth } from "ol/extent.js";
import { Polygon } from "ol/geom";
import { Fill, Style, Stroke } from "ol/style";
import Feature from "ol/Feature";
// import
export default {
  data() {
    return {
      map: null,
      polygonSource: null,
      polygonLayer: null,
      layer: null,
    };
  },
  methods: {
    //点位显示
    showPoints() {
      let mapData = [
        {
          domain_id: 10000029,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.40384397",
          gps_y: "39.91487908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
      ];
      let vectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          image: new Icon({
            src: iconImg,
          }),
        }),
      });

      let features = [];
      mapData.forEach((item) => {
        if (item.gps_x && item.gps_y) {
          let newObj = Object.assign({}, item);
          newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
          features.push(new Feature(newObj));
        }
      });
      vectorLayer.getSource().addFeatures(features);
      this.map.addLayer(vectorLayer);
    },

    //初始化默认地图
    createMap() {
      const projExtent = getProjection("EPSG:3857").getExtent();
      const startResolution = getWidth(projExtent) / 256;
      const resolutions = new Array(22);
      for (let i = 0, ii = resolutions.length; i < ii; ++i) {
        resolutions[i] = startResolution / Math.pow(2, i);
      }
      const tileGrid = new TileGrid({
        extent: [
          13512793.694715144, 3692705.0036003077, 13515852.525118226,
          3696369.8737244364,
        ],
        // extent: [-13884991, 2870341, -7455066, 6338219],

        resolutions: resolutions,
        tileSize: [642, 768],
        // tileSize: [512, 256],
      });
      this.polygonSource = new VectorSource({ wrapX: false });
      this.polygonLayer = new VectorLayer({
        source: this.polygonSource,
      });

      const layers = [
        // new TileLayer({
        //   source: new OSM(),
        // }),
        new TileLayer({
          source: new TileWMS({
            url: "http://116.63.153.54:8080/geoserver/wms",
            crossOrigin: "anonymous",
            params: {
              LAYERS: "grotto:L17",
              TILED: true,
              format: "image/png",
            },
            // crossOrigin: "anonymous",
            // params: {
            //   LAYERS: "test:L17",
            //   TILED: true,
            //   format: "image/png",
            // },
            serverType: "geoserver",
            tileGrid: tileGrid,
          }),
        }),
        this.polygonLayer,
      ];
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          // center: [-10997148, 4569099],
          center: [13514313.694715144, 3694580.0036003077],
          zoom: 15,
          minZoom: 10,
          maxZoom: 18,
        }),
      });
    },
    drawPolygon(data) {
      // debugger;
      let self = this;
      //下边来添加一线feature
      var feature = new Feature({
        type: "Polygon",
        geometry: new Polygon(
          data.points // 线的坐标
        ),
      });
      let lineStyle = new Style({
        fill: new Fill({
          color: data.type,
        }),
        stroke: new Stroke({
          color: data.type,
          width: 1,
        }),
      });
      // 添加线的样式
      feature.setStyle(lineStyle);
      // 添加线的fature
      self.polygonSource.addFeature(feature);
    },
  },
  mounted() {
    this.createMap();
    let pointArr = [
      {
        points: [
          [
            [13514775.302706236, 3695762.388881599],
            [13514847.559584538, 3695720.5873817555],
            [13514578.648573361, 3695335.469672603],
            [13514764.355078403, 3695207.079990105],
            [13514034.840360064, 3694148.1239965027],
            [13514075.815952335, 3694126.0602160497],
            [13514797.616770016, 3695222.945301435],
            [13514634.721213352, 3695343.9212450124],
            [13514890.720553115, 3695721.7762705027],
            [13514907.002259303, 3695744.7890745755],
            [13514799.512688277, 3695814.657295742],
            [13514775.302706236, 3695762.388881599],
          ],
        ],
        type: "rgba(255, 0, 0, 0.5)",
      },
      {
        points: [
          [
            [13513831.185974093, 3694212.1504016854],
            [13513735.639688738, 3694068.8309736503],
            [13513893.291059576, 3693968.5073740263],
            [13513998.391973468, 3694126.158744864],
            [13513831.185974093, 3694212.1504016854],
          ],
        ],
        type: "rgba(255, 0, 255, 0.5)",
      },
    ];
    pointArr.forEach((item) => {
      this.drawPolygon(item);
    });
  },
};
</script>

<style scoped>
#map {
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  /* transform: rotate(90deg); */
  /* border: 1px solid; */
}
</style>
